<template>
  <div class="hello">
    <header>
      <p>搜索商品类型：<select v-model="leibie">
        <option value="1">衣服</option>
        <option value="2">首饰</option>
        <option value="3">数码</option>
        <option value="4">文具</option>
        <option value="5">餐食</option>
      </select></p>
      
    </header>
    <table border="1" cellpadding="0" cellspacing="0">
      <thead>
        <tr>
          <th>全选:<input type="checkbox" v-model="selectAll" @change="handleSelectAll"> </th>
          <th>序号</th>
          <th>商品名称</th>
          <th>类型</th>
          <th>购买数量</th>
          <th>单价</th>
          <th>小计</th>
        </tr>
      </thead>
      <tbody>
        <tr align="center" v-for="(item,index) in arr" :key="item">
          <td><input type="checkbox" v-model="item.selected"></td>
          <td>{{item.id}}</td>
          <td>{{item.pro_name}}</td>
          <td v-if="item.cateid==1">衣服</td>
          <td v-if="item.cateid==2">首饰</td>
          <td v-if="item.cateid==3">数码</td>
          <td v-if="item.cateid==4">文具</td>
          <td v-if="item.cateid==5">餐食</td>
          <td>
            <button @click="changeNum(-1,index)">-</button>
            {{item.pro_num}}
            <button @click="changeNum(1,index)">+</button>
          </td>
          <td>{{item.pro_price}}</td>
          <td>{{item.pro_price*item.pro_num}}</td>
        </tr>
      </tbody>
    </table>
    <p>所有商品的总价：{{sumPrice}}</p>
  </div>
</template>

<!--设置setup语法糖-->
<script setup>
import {computed, reactive, ref} from 'vue';
// setup的数据设置
let arr = reactive([ 
{ id:1 , pro_name:'冬季长款风衣女' , cateid:1, pro_num:1 , pro_price:1999.90 ,selected:false},
{ id:2 , pro_name:'情侣款双排钻戒' , cateid:2, pro_num:1 , pro_price:899.90 ,selected:false},
{ id:3 , pro_name:'三线头移动充电宝' , cateid:3, pro_num:1 , pro_price:298.80 ,selected:false}, 
{ id:4 , pro_name:'马丁靴男2024年新款休闲运动' , cateid:1, pro_num:1 , pro_price:89.90 ,selected:false},
{ id:5 , pro_name:'PC电脑一体机', pro_num:1 , cateid:3, pro_price:5680 ,selected:false},
{ id:6 , pro_name:'iPad平板', pro_num:2 , cateid:3, pro_price:7100 ,selected:false},
{ id:7 , pro_name:'华为模型机' , pro_num:1 , cateid:3, pro_price:106.9 ,selected:false},
{ id:8 , pro_name:'秋季卫衣（男装）' , cateid:1, pro_num:5 , pro_price:78.2 ,selected:false},
{ id:9 , pro_name:'西装(含长裤+马甲+外套+衬衫)' , cateid:1, pro_num:1 , pro_price:118.6 ,selected:false},
{ id:10 , pro_name:'苏伯蛋花汤速食9种口味40包/大袋' , cateid:5 , pro_num:4 , pro_price:44.33 ,selected:false},
{ id:11 , pro_name:'活页笔记本50开' , cateid:4 , pro_num:5 , pro_price:12.8 ,selected:false},
])


// setup的事件函数
const changeNum=(n,i)=>{
      arr[i].pro_num += n;
      if (arr[i].pro_num<=0){
       arr[i].pro_num=1
      }
}

// setup的计算属性（如果需要传递参数，设置到箭头函数的括号内）
const sumPrice = computed(()=>{
  let sum = 0;
  arr.forEach((item)=>{
    sum += item.pro_num*item.pro_price
  })
  return sum.toFixed(2);
});

const selectAll = ref(false);

const handleSelectAll = () =>{
  this.arr.value.forEach(i=>{
    i.selected = selectAll.value;
  })
}
// watch(() => this.arr.value.map(item => item.selected), (newValues) => {
//   selectAll.value = newValues.every(value => value);
// }, { deep: true });

</script>

<style scoped>
.hello{
  width: 100%;
  margin: 20px;
}
.hello table{
  width: 60%;
  text-align: center;
  margin: 0 auto;
}
.hello p{
  text-align: center;
}
</style>
